Merge branch 'main' of https://github.com/SCBJ-7/SCBJ-FE into feat/#163…

…-purchaselist-api
SCBJ-7 · Jan 25, 2024 · b42242d · b42242d
2 parents 645f2f2 + c8353f7
commit b42242d
Show file tree

Hide file tree

Showing 49 changed files with 1,517 additions and 152 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="/src/assets/logos/favicon.svg"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="preconnect"
@@ -14,7 +18,7 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
-    <title>Vite + React + TS</title>
+    <title>퍼센트 호텔</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/apis/cancelSale.ts b/src/apis/cancelSale.ts
@@ -0,0 +1,7 @@
+import { axiosInstance } from "@apis/axiosInstance";
+import { END_POINTS } from "@/constants/api";
+
+export const cancelSale = async (saleId: string) => {
+  const { data } = await axiosInstance.delete(END_POINTS.ROOM(saleId));
+  return data.data;
+};
diff --git a/src/apis/fetchMainItems.ts b/src/apis/fetchMainItems.ts
@@ -1,17 +1,20 @@
 import { LocaleItemsType, WeekendItem } from "./../types/saleSection";
-import { axiosInstance } from "@apis/axiosInstance";
-import { END_POINTS } from "@/constants/api";
+import { BASE_URL, END_POINTS } from "@/constants/api";
+import axios from "axios";
 
 // 유저 정보를 불러오는 api입니다.
 export const fetchMainItem = async (): Promise<
   [LocaleItemsType, WeekendItem[]]
 > => {
-  const { data } = await axiosInstance.get(
-    END_POINTS.MAIN +
+  const { data } = await axios.get(
+    BASE_URL +
+      END_POINTS.MAIN +
       "?cityNames=서울&cityNames=강원&cityNames=부산&cityNames=제주&cityNames=경상&cityNames=전라",
   );
+
   const { weekend, ...locale } = data.data;
   const temp = weekend.content;
+  console.log([locale, temp], "locale, temp");
 
   return [locale, temp];
 };
diff --git a/src/apis/fetchRoom.ts b/src/apis/fetchRoom.ts
@@ -1,11 +1,11 @@
-import { axiosInstance } from "@apis/axiosInstance";
-import { END_POINTS } from "@constants/api";
+import { BASE_URL, END_POINTS } from "@constants/api";
 import type { ResponseData } from "@type/responseType";
 import type { RoomData } from "@type/room";
+import axios from "axios";
 
 export const getRoom = async (roomId: string): Promise<RoomData> => {
-  const { data } = await axiosInstance.get<ResponseData<RoomData>>(
-    END_POINTS.ROOM(roomId),
+  const { data } = await axios.get<ResponseData<RoomData>>(
+    BASE_URL + END_POINTS.ROOM(roomId),
   );
   return data.data;
 };
diff --git a/src/apis/fetchSaleDetail.ts b/src/apis/fetchSaleDetail.ts
@@ -0,0 +1,20 @@
+// import { END_POINTS } from "@constants/api";
+// import { axiosInstance } from "./axiosInstance";
+import axios from "axios";
+import type { ResponseData } from "@type/responseType";
+import type { ISaleData } from "@type/saleDetail";
+
+// FIXME as below (백엔드 수정 후)
+// export const fetchSaleDetail = async (id: string): Promise<ISaleData> => {
+//   const { data } = await axios.get<ResponseData<ISaleData>>(
+//     END_POINTS.SALE_DETAIL(id),
+//   );
+//   return data.data;
+// };
+
+export const fetchSaleDetail = async () => {
+  const { data } = await axios.get<ResponseData<ISaleData>>(
+    "/v1/sale-history/49",
+  );
+  return data.data;
+};
diff --git a/src/apis/fetchSaleList.ts b/src/apis/fetchSaleList.ts
@@ -0,0 +1,11 @@
+import { axiosInstance } from "./axiosInstance";
+
+export const fetchSaleList = async () => {
+  try {
+    const { data } = await axiosInstance.get("/v1/members/sale-history");
+    console.log(data);
+    return data;
+  } catch (err) {
+    alert("⚠️예기치 못한 에러가 발생하였습니다.");
+  }
+};
diff --git a/src/assets/logos/favicon.svg b/src/assets/logos/favicon.svg
diff --git a/src/components/caption/Cation.style.ts b/src/components/caption/Cation.style.ts
@@ -18,6 +18,7 @@ export const CaptionWrapper = styled.div`
 export const WarningIcon = styled(PiWarningCircle)`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.cautionRed};
+  flex-shrink: 0;
 `;
 
 type VariantProps = {

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -21,6 +21,7 @@ const Layout = ({ children }: ChildrenProps) => {
     PATH.DETAIL_ROOM,
     PATH.YANOLJA_ACCOUNT,
     PATH.WRITE_TRANSFER_PRICE,
+    PATH.WRITE_TRANSFER_SUCCESS,
   ];
 
   const pathsToExcludeBottom = [

diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx
@@ -19,6 +19,11 @@ const Header = () => {
     }
   }
 
+  if (pathname.includes(PATH.SALE_DETAIL)) {
+    undo = true;
+    title = "판매내역 상세";
+  }
+
   switch (pathname) {
     case PATH.ROOT:
       alarmIC = false;
@@ -55,7 +60,6 @@ const Header = () => {
       title = "구매내역상세";
       undo = true;
       break;
-
     case PATH.SETTING:
       alarmIC = false;
       settingIC = false;

diff --git a/src/constants/api.ts b/src/constants/api.ts
@@ -12,6 +12,7 @@ export const END_POINTS = {
   USER_INFO: "/v1/members",
   PURCHASE_HISTORY: "/v1/members/purchased-history",
   PURCHASE_DETAIL: (purchaseId: string) => `/v1/purchase-detail/${purchaseId}`,
+  SALE_DETAIL: (saleId: string) => `/v1/sale-history/${saleId}`,
   EMAIL: "/v1/members/email",
   YANOLJA: "/v1/members/yanolja",
   ACCOUNT: "/v1/members/account",

diff --git a/src/constants/path.ts b/src/constants/path.ts
@@ -7,6 +7,7 @@ export const PATH = {
   SALE_LIST: "/my-page/sale-list",
   PURCHASE_LIST: "/my-page/purchase-list",
   PURCAHSE_DEATAIL: "/my-page/purchase-detail",
+  SALE_DETAIL: "/my-page/sale-detail",
   DETAIL_ROOM: "/room",
   WRITE_TRANSFER: "/transfer/new",
   WRITE_TRANSFER_PRICE: "/transfer/new/price",

diff --git a/src/constants/sale.ts b/src/constants/sale.ts
@@ -0,0 +1,7 @@
+export const NAV_LIST = [
+  { status: "all", label: "전체" },
+  { status: "for-sale", label: "판매중" },
+  { status: "sale-completed", label: "판매완료" },
+  { status: "calculate-completed", label: "정산완료" },
+  { status: "sale-expired", label: "판매만료" },
+];
diff --git a/src/constants/time.ts b/src/constants/time.ts
@@ -0,0 +1,14 @@
+export const SECOND = 1000;
+export const MINUTE = SECOND * 60;
+export const HOUR = MINUTE * 60;
+export const DAY = HOUR * 24;
+export const WEEK = DAY * 7;
+export const MONTH = DAY * 30;
+
+export const TIME_UNIT = [
+  { unit: "달", duration: MONTH },
+  { unit: "주", duration: WEEK },
+  { unit: "일", duration: DAY },
+  { unit: "시간", duration: HOUR },
+  { unit: "분", duration: MINUTE },
+];
diff --git a/src/hooks/api/query/useSaleDetailQuery.ts b/src/hooks/api/query/useSaleDetailQuery.ts
@@ -0,0 +1,14 @@
+import { fetchSaleDetail } from "@apis/fetchSaleDetail";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import type { ISaleData } from "@type/saleDetail";
+
+export const useSaleDetailQuery = (saleId: string) => {
+  const saleDetail = useSuspenseQuery<ISaleData>({
+    queryKey: ["sale", saleId],
+    // FIXME: 백엔드 수정 후 saleId를 넣어서 api 요청하도록 변경 필요
+    // queryFn: async () => await fetchSaleDetail(saleId),
+    queryFn: async () => await fetchSaleDetail(),
+  });
+
+  return saleDetail;
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -3,15 +3,15 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "styled-components";
-import { worker } from "./mocks/broswer";
+// import { worker } from "./mocks/broswer";
 import { router } from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
 
 const queryClient = new QueryClient();
-if (process.env.NODE_ENV === "development") {
-  worker.start();
-}
+// if (process.env.NODE_ENV === "development") {
+//   worker.start();
+// }
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <QueryClientProvider client={queryClient}>

diff --git a/src/mocks/data/dummySaleDetail.json b/src/mocks/data/dummySaleDetail.json
@@ -0,0 +1,25 @@
+{
+  "data": {
+    "saleStatus": "판매중",
+    "checkIn": "24.01.15 (월) 15:00",
+    "checkOut": "24.01.16 (화) 15:00",
+    "hotelImage": "https://yaimg.yanolja.com/v5/2022/08/25/13/1280/630774ab229623.33150829.jpg",
+    "standardPeople": "2",
+    "maxPeople": "4",
+    "leftHour": 6,
+    "hotelName": "호텔 인 나인 강남",
+    "roomName": "디럭스 킹 시티뷰",
+    "firstPriceData": {
+      "originalPrice": 212000,
+      "firstSalePrice": 139000
+    },
+    "secondPriceData": {
+      "startDate": "24.01.16 (화) 15:00",
+      "secondGrantPeriod": 6,
+      "secondPrice": 60000
+    },
+    "bank": "신한",
+    "accountNumber": "110472321"
+  },
+  "message": "판매 내역 상세 조회를 성공했습니다."
+}
diff --git a/src/mocks/data/dummySaleList.json b/src/mocks/data/dummySaleList.json
@@ -0,0 +1,87 @@
+{
+  "status": 200,
+  "data": {
+    "products": [
+      {
+        "id": 101,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2022/08/25/13/1280/630774ab229623.33150829.jpg",
+        "name": "시그니엘 레지던스",
+        "roomType": "스탠다드 더블",
+        "checkInDate": "2024-01-08",
+        "checkOutDate": "2024-01-11",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "판매완료"
+      },
+      {
+        "id": 102,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+        "name": "신라1 호텔",
+        "roomType": "스탠다드 싱글",
+        "checkInDate": "2024-01-17",
+        "checkOutDate": "2024-01-21",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "정산완료"
+      },
+      {
+        "id": 103,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2022/06/23/12/1280/62b46269e5eca1.34391138.jpg",
+        "name": "대명리조트 호텔",
+        "roomType": "디럭스",
+        "checkInDate": "2023-11-12",
+        "checkOutDate": "2023-11-13",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "판매만료"
+      },
+      {
+        "id": 104,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2023/09/06/14/1280/64f8913aa908e8.86385780.jpg",
+        "name": "신라스테이 삼성",
+        "roomType": "스탠다드 싱글",
+        "checkInDate": "2023-12-25",
+        "checkOutDate": "2023-12-26",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "판매만료"
+      },
+      {
+        "id": 106,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2023/09/06/14/1280/64f8913aa908e8.86385780.jpg",
+        "name": "신라스테이 삼성",
+        "roomType": "스탠다드 싱글",
+        "checkInDate": "2023-12-25",
+        "checkOutDate": "2023-12-26",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "정산완료"
+      },
+      {
+        "id": 107,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2023/09/06/14/1280/64f8913aa908e8.86385780.jpg",
+        "name": "신라스테이 삼성",
+        "roomType": "스탠다드 싱글",
+        "checkInDate": "2024-02-25",
+        "checkOutDate": "2023-02-26",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "판매중"
+      },
+      {
+        "id": 108,
+        "imageUrl": "https://yaimg.yanolja.com/v5/2023/09/06/14/1280/64f8913aa908e8.86385780.jpg",
+        "name": "신라스테이 삼성",
+        "roomType": "스탠다드 싱글",
+        "checkInDate": "2024-01-30",
+        "checkOutDate": "2023-02-02",
+        "firstPrice": 1200000,
+        "secondPrice": 1000000,
+        "saleStatus": "판매중"
+      }
+    ],
+    "page": 0,
+    "pageSize": 10
+  },
+  "message": "조회가 성공하였습니다."
+}
diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts
@@ -1,5 +1,6 @@
 import { http, HttpResponse } from "msw";
-
+import dummySaleList from "./data/dummySaleList.json";
+import dummySaleDetail from "./data/dummySaleDetail.json";
 import dummyPurchaseList from "./data/dummyPuchaseList.json";
 import dummyPurchaseDetail from "./data/dummyPurchaseDetail.json";
 import dummySearchList from "./data/dummySearchList.json";
@@ -34,6 +35,12 @@ export const handlers = [
   http.get("/v1/products", () => {
     return HttpResponse.json(dummySearchList);
   }),
+  http.get("/v1/members/sale-history", () => {
+    return HttpResponse.json(dummySaleList);
+  }),
+  http.get("/v1/sale-history/49", () => {
+    return HttpResponse.json(dummySaleDetail);
+  }),
 
   /*
     warning 없애기용.

diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
@@ -23,7 +23,7 @@ const Home = () => {
   const localeEntries: [number, string, LocaleItem[]][] = Object.entries(
     localeProds,
   )
-    .filter((v) => v[1] !== null)
+    .filter((v) => v[1].length !== 0)
     .map((v, i) => [i, v[0], v[1]]);
 
   const [localeAndHotel] = useState(localeEntries);
@@ -52,7 +52,9 @@ const Home = () => {
           <TextLocaleAnimator text={locale[currentLocale[1]]} />
           <span>지역</span>
           <PercentAnimator
-            percent={currentLocale[2][0]?.salePercentage}
+            percent={
+              currentLocale[2][currentLocale[2].length - 1]?.salePercentage
+            }
             localeAndHotel={localeAndHotel}
           />
           <span>할인 호텔</span>

diff --git a/src/pages/homePage/itemCarousel/ItemCarousel.tsx b/src/pages/homePage/itemCarousel/ItemCarousel.tsx
@@ -71,7 +71,7 @@ const ItemCarousel = ({
           {localeAndHotel.map(
             (item) =>
               item[2].length && (
-                <ItemCarouselUnit key={item[2][0]?.id} item={item} />
+                <ItemCarouselUnit key={item[2][0].id} item={item} />
               ),
           )}
         </S.SliderContainer>