Feat: dialog 컴포넌트 추가

src/apis/axiosInstance.ts

@@ -1,12 +1,3 @@
-import { ResponseError } from "@/components/error/Error";
-import {
-  ACCESS_TOKEN,
-  BASE_URL,
-  ERROR_CODE,
-  REFRESH_TOKEN,
-  STATUS_CODE,
-} from "@/constants/api";
-import { PATH } from "@/constants/path";
 import axios from "axios";
 
 import { fetchNewToken } from "./fetchNewToken";
@@ -17,6 +8,16 @@ import type {
   InternalAxiosRequestConfig,
 } from "axios";
 
+import { ResponseError } from "@/components/error/Error";
+import {
+  ACCESS_TOKEN,
+  BASE_URL,
+  ERROR_CODE,
+  REFRESH_TOKEN,
+  STATUS_CODE,
+} from "@/constants/api";
+import { PATH } from "@/constants/path";
+
 export const axiosInstance = axios.create({
   baseURL: BASE_URL,
   timeout: 5000,

src/apis/fetchRoom.ts

@@ -1,20 +1,19 @@
-import { ACCESS_TOKEN, BASE_URL, END_POINTS } from "@/constants/api";
 import axios from "axios";
 
 import type { ResponseData } from "@/types/responseType";
 import type { RoomData } from "@/types/room";
 
+import { ACCESS_TOKEN, BASE_URL, END_POINTS } from "@/constants/api";
+
 export const getRoom = async (
   productId: string,
   isLoggedIn: boolean,
 ): Promise<RoomData> => {
-  const headers: { [key: string]: string } = {};
+  const headers: Record<string, string> = {};
 
   if (isLoggedIn) {
     const accessToken = localStorage.getItem(ACCESS_TOKEN);
-    if (!accessToken) {
-      headers["Authorization"] = `Bearer ${accessToken}`;
-    }
+    headers["Authorization"] = `${accessToken}`;
   }
 
   const { data } = await axios.get<ResponseData<RoomData>>(

src/apis/fetchWish.ts

@@ -0,0 +1,20 @@
+import type { ResponseData } from "@/types/responseType.ts";
+import type { WishDataType } from "@/types/wish.ts";
+
+import { axiosInstance } from "@/apis/axiosInstance.ts";
+import { END_POINTS } from "@/constants/api.ts";
+
+export const deleteWish = async (productId: string): Promise<void> => {
+  return await axiosInstance.delete(`${END_POINTS.WISH(productId)}`);
+};
+
+export const postWish = async (productId: string): Promise<void> => {
+  return await axiosInstance.post(`${END_POINTS.WISH(productId)}`);
+};
+
+export const getWish = async (): Promise<WishDataType> => {
+  const { data } = await axiosInstance.get<ResponseData<WishDataType>>(
+    `${END_POINTS.WISH_LIST}`,
+  );
+  return data.data;
+};

src/components/layout/Layout.style.ts

@@ -2,15 +2,46 @@ import { styled } from "styled-components";
 
 import type { ColorKeys } from "@/styles/theme.ts";
 
+import { remCalc } from "@/utils/styleFormatter.ts";
+
+export type LayoutStyleProps = {
+  bg?: ColorKeys;
+  /**
+   * padding-top
+   */
+  pt?: number;
+  /**
+   * padding-bottom
+   */
+  pb?: number;
+  /**
+   * padding-block
+   */
+  paddingBlock?: number;
+  /**
+   * padding-inline
+   */
+  paddingInline?: number;
+};
+
 export const Wrapper = styled.div.withConfig({
-  shouldForwardProp: (prop) => prop !== "bg",
-})<{ bg: ColorKeys }>`
+  shouldForwardProp: (prop) =>
+    !["bg", "pt", "pb", "paddingBlock", "paddingInline"].includes(prop),
+})<LayoutStyleProps>`
   width: 100%;
   min-height: 100%;
   max-width: 768px;
   min-width: 360px;
   position: relative;
   margin: 0 auto;
 
-  background-color: ${({ theme, bg }) => theme.color[bg]};
+  background-color: ${({ theme, bg }) =>
+    bg ? theme.color[bg] : theme.color.white};
+  padding-top: ${({ pt }) => (pt ? `calc(56px + ${remCalc(pt)})` : undefined)};
+  padding-bottom: ${({ pb }) =>
+    pb ? `calc(78px + ${remCalc(pb)})` : undefined};
+  padding-block: ${({ paddingBlock }) =>
+    paddingBlock ? remCalc(paddingBlock) : undefined};
+  padding-inline: ${({ paddingInline }) =>
+    paddingInline ? remCalc(paddingInline) : undefined};
 `;

src/components/layout/Layout.tsx

@@ -5,28 +5,29 @@ import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
 import { A2HS } from "../A2HS/A2HS";
 
-import { ColorKeys } from "@/styles/theme.ts";
+import type { LayoutStyleProps } from "./Layout.style";
+
 import { isMobile } from "@/utils/isMobile";
 
-interface ChildrenProps {
+interface ChildrenProps extends LayoutStyleProps {
   children: React.ReactNode;
   isHeaderOn?: boolean;
   isBottomNavOn?: boolean;
-  bg?: ColorKeys;
 }
 
-const Layout = ({
-  children,
-  isHeaderOn = false,
-  isBottomNavOn = false,
-  bg = "white",
-}: ChildrenProps) => {
+const Layout = (props: ChildrenProps) => {
   const isMobileDevice = isMobile();
+  const {
+    isHeaderOn = false,
+    isBottomNavOn = false,
+    children,
+    ...rest
+  } = props;
 
   return (
     <>
       {isHeaderOn && <Header />}
-      <S.Wrapper bg={bg}>
+      <S.Wrapper {...rest}>
         {children}
         <A2HS />
       </S.Wrapper>

src/components/layout/navBottom/NavBottom.style.ts

@@ -1,14 +1,15 @@
 import { NavLink } from "react-router-dom";
 import styled from "styled-components";
 
-import NavIconHome from "@/assets/icons/NavHome";
-
 export const BottomNavContainer = styled.section<{ $isMobile: boolean }>`
   display: flex;
   position: fixed;
   bottom: 0;
 
   width: 100%;
+  max-width: 768px;
+  min-width: 360px;
+  z-index: 1;
   height: ${({ $isMobile }) => ($isMobile ? "78px" : "60px")};
   max-width: 768px;
 

src/components/layout/navBottom/NavBottom.tsx

@@ -1,14 +1,13 @@
-import IconHomeFill from "@assets/icons/navIcon/icon_home_fill.svg?react";
-import IconHomeLine from "@assets/icons/navIcon/icon_home_line.svg?react";
-import IconMyFill from "@assets/icons/navIcon/icon_my_fill.svg?react";
-import IconMyLine from "@assets/icons/navIcon/icon_my_line.svg?react";
-import IconSearchFill from "@assets/icons/navIcon/icon_search_fill.svg?react";
-import IconSearchLine from "@assets/icons/navIcon/icon_search_line.svg?react";
-import IconTransferWritingFill from "@assets/icons/navIcon/icon_transferWriting_fill.svg?react";
-import IconTransferWritingLine from "@assets/icons/navIcon/icon_transferWriting_line.svg?react";
-// 찜 페이지용
-// import IconWishFill from "@assets/icons/navIcon/icon_wish_fill.svg?react";
-// import IconWishLine from "@assets/icons/navIcon/icon_wish_Line.svg?react";
+import IconHomeFill from "@/assets/icons/navIcon/icon_home_fill.svg?react";
+import IconHomeLine from "@/assets/icons/navIcon/icon_home_line.svg?react";
+import IconMyFill from "@/assets/icons/navIcon/icon_my_fill.svg?react";
+import IconMyLine from "@/assets/icons/navIcon/icon_my_line.svg?react";
+import IconSearchFill from "@/assets/icons/navIcon/icon_search_fill.svg?react";
+import IconSearchLine from "@/assets/icons/navIcon/icon_search_line.svg?react";
+import IconTransferWritingFill from "@/assets/icons/navIcon/icon_transferWriting_fill.svg?react";
+import IconTransferWritingLine from "@/assets/icons/navIcon/icon_transferWriting_line.svg?react";
+import IconWishFill from "@/assets/icons/navIcon/icon_wish_fill.svg?react";
+import IconWishLine from "@/assets/icons/navIcon/icon_wish_line.svg?react";
 
 import * as S from "./NavBottom.style";
 import ToolTip from "./toolTip/ToolTip";
@@ -42,13 +41,12 @@ const BottomNav = ({ isMobile }: BottomNavProps) => {
       path: PATH.WRITE_TRANSFER,
       icon: [<IconTransferWritingFill />, <IconTransferWritingLine />],
     },
-    // 찜 페이지용
-    // {
-    //   id: 4,
-    //   name: "찜",
-    //   path: "/wish",
-    //   icon: [<IconWishFill />, <IconWishLine />],
-    // },
+    {
+      id: 4,
+      name: "찜",
+      path: PATH.WISHLIST,
+      icon: [<IconWishFill />, <IconWishLine />],
+    },
     {
       id: 5,
       name: "마이",

src/constants/api.ts

@@ -32,6 +32,8 @@ export const END_POINTS = {
   SEARCH: "/v1/products/search",
   CHANGE_NAME: "/v1/members/name",
   CHANGE_NUMBER: "/v1/members/phone",
+  WISH_LIST: "/v1/favorites",
+  WISH: (productId: string) => `/v1/favorites/${productId}`,
 } as const;
 
 export const STATUS_CODE = {

src/constants/path.ts

@@ -26,4 +26,5 @@ export const PATH = {
   RELOAD: 0,
   PAYMENT: (productId: string) => `/payment/${productId}`,
   PAYMENT_SUCCESS: (productId: string) => `/payment/${productId}/success`,
+  WISHLIST: "/wishlist",
 } as const;

src/hooks/api/useRoomQuery.ts

@@ -1,10 +1,11 @@
-import { getRoom } from "@/apis/fetchRoom";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { calculateDiscount } from "@/utils/calculator";
 
 import type { RoomData } from "@/types/room";
 import type { AxiosError } from "axios";
 
+import { getRoom } from "@/apis/fetchRoom";
+import { calculateDiscount } from "@/utils/calculator";
+
 interface RoomQueryData {
   rawData: RoomData;
   discountRate: string;

src/hooks/api/useWishQuery.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { deleteWish, getWish, postWish } from "@/apis/fetchWish.ts";
+
+export function useWishQuery() {
+  return useQuery({
+    queryKey: ["wish"],
+    queryFn: getWish,
+  });
+}
+
+export function useDeleteWishMutation() {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: deleteWish,
+    onMutate: async (newLike) => {
+      await queryClient.cancelQueries({ queryKey: ["wish"] });
+      const previousWish = queryClient.getQueryData(["wish"]);
+      queryClient.setQueryData(["wish"], newLike);
+      return { previousWish };
+    },
+    onError: (err, newLike, context) => {
+      queryClient.setQueryData(["wish"], context?.previousWish);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["wish"] });
+    },
+  });
+
+  return { deleteWish: mutate };
+}
+
+export function usePostWishMutation() {
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: postWish,
+    onMutate: async (newLike) => {
+      await queryClient.cancelQueries({ queryKey: ["wish"] });
+      const previousWish = queryClient.getQueryData(["wish"]);
+      queryClient.setQueryData(["wish"], newLike);
+      return { previousWish };
+    },
+    onError: (err, newLike, context) => {
+      queryClient.setQueryData(["wish"], context?.previousWish);
+    },
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ["wish"] });
+    },
+  });
+
+  return { postWish: mutate };
+}

src/main.tsx

@@ -8,6 +8,12 @@ import AppRouter from "./routes/router";
 import { GlobalStyle } from "./styles/globalStyle";
 import { theme } from "./styles/theme";
 
+import { worker } from "@/mocks/broswer.ts";
+
+if (process.env.NODE_ENV === "development") {
+  worker.start();
+}
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

src/mocks/data/dummyRoomDetail.json

@@ -1,11 +1,11 @@
 {
   "data": {
     "hotelName": "호텔 인 나인 강남",
-    "hotelImageUrl": [
-      "https://yaimg.yanolja.com/v5/2023/05/17/12/1280/6464c1e2d8acc7.52423534.jpg",
-      "https://yaimg.yanolja.com/v5/2022/06/08/18/1280/62a0ead93af4c0.61900529.jpg"
+    "hotelImageUrlList":[
+      "ankjdanskdnasd.jpg",
+      "yjptmpbtpbpe.jpg"
     ],
-    "roomName": "스탠다드 더블",
+    "roomName":"스탠다드 더블",
     "checkIn": "2023-12-24T15:00:00",
     "checkOut": "2023-12-25T10:00:00",
     "originalPrice": 400000,
@@ -22,7 +22,27 @@
     "hotelAddress": "서울특별시 강남구 테헤란로 99길 9",
     "hotelInfoUrl": "https://place-site.yanolja.com/places/3001615",
     "saleStatus": true,
-    "isSeller": false
+    "isSeller": false,
+    "roomAllRating": 4.5,
+    "hotelLevel": "5성급",
+    "sellerCommentList": [
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ",
+      "사주세요",
+      "ㅠㅠ"
+    ],
+    "facilityInformation": "에어컨\nTV\n냉장고\n커피포트",
+    "isLike": true
   },
   "message": "상품 조회에 성공했습니다."
-}
+}

src/mocks/handlers/payment.ts

@@ -1,7 +1,8 @@
+import { http, HttpResponse } from "msw";
+
 import { BASE_URL, END_POINTS } from "@/constants/api";
 import dummyPaymentInfo from "@/mocks/data/dummyPaymentInfo.json";
 import dummyPaymentSuccess from "@/mocks/data/dummyPaymentSuccess.json";
-import { http, HttpResponse } from "msw";
 
 export const paymentHandler = [
   http.get(`${BASE_URL + END_POINTS.PAYMENT(":productId")}`, () => {

src/pages/roomDetailPage/RoomDetail.style.ts

@@ -1,9 +1,10 @@
-import ArrowSvg from "@/assets/icons/ic_arrow.svg?react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
 
 import type { ColorKeys, TypoKeys } from "@/styles/theme";
 
+import ArrowSvg from "@/assets/icons/ic_arrow.svg?react";
+
 export const Container = styled.main`
   background-color: ${({ theme }) => theme.color.greyScale7};
   padding-bottom: 62px;