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

…-purchaselist-api

src/apis/axiosInstance.ts

@@ -22,7 +22,7 @@ const addToken = (config: InternalAxiosRequestConfig) => {
 
   if (!accessToken) {
     alert("다시 로그인 해 주세요."); // or 로그인
-    window.location.href = PATH.LOGIN;
+    window.location.href = `${PATH.LOGIN}?redirect=${window.location.pathname}`;
   }
 
   config.headers.Authorization = `${accessToken}`;

src/apis/fetchAlarm.ts

@@ -0,0 +1,8 @@
+import { END_POINTS } from "@constants/api";
+import { axiosInstance } from "./axiosInstance";
+import { AlarmType } from "@type/alarm";
+
+export const fetchAlarm = async (): Promise<AlarmType[]> => {
+  const { data } = await axiosInstance.get(END_POINTS.ALARM);
+  return data.data;
+};

src/apis/fetchHasAlarm.ts

@@ -0,0 +1,8 @@
+import { END_POINTS } from "@constants/api";
+import { axiosInstance } from "./axiosInstance";
+import { ReadType } from "@type/alarm";
+
+export const fetchHasAlarm = async (): Promise<ReadType> => {
+  const { data } = await axiosInstance.get(END_POINTS.HASALARM);
+  return data.data;
+};

src/apis/fetchMainItems.ts

@@ -1,12 +1,17 @@
+import { LocaleItemsType, WeekendItem } from "./../types/saleSection";
 import { axiosInstance } from "@apis/axiosInstance";
 import { END_POINTS } from "@/constants/api";
 
 // 유저 정보를 불러오는 api입니다.
-export const fetchMainItem = async () => {
+export const fetchMainItem = async (): Promise<
+  [LocaleItemsType, WeekendItem[]]
+> => {
   const { data } = await axiosInstance.get(
     END_POINTS.MAIN +
       "?cityNames=서울&cityNames=강원&cityNames=부산&cityNames=제주&cityNames=경상&cityNames=전라",
   );
-  console.log(data.data);
-  return data.data;
+  const { weekend, ...locale } = data.data;
+  const temp = weekend.content;
+
+  return [locale, temp];
 };

src/apis/fetchRoom.ts

@@ -1,7 +1,11 @@
 import { axiosInstance } from "@apis/axiosInstance";
 import { END_POINTS } from "@constants/api";
+import type { ResponseData } from "@type/responseType";
+import type { RoomData } from "@type/room";
 
-export const getRoom = async (roomId: string) => {
-  const { data } = await axiosInstance.get(END_POINTS.ROOM(roomId));
+export const getRoom = async (roomId: string): Promise<RoomData> => {
+  const { data } = await axiosInstance.get<ResponseData<RoomData>>(
+    END_POINTS.ROOM(roomId),
+  );
   return data.data;
 };

src/apis/logout.ts

@@ -0,0 +1,9 @@
+import { axiosInstance } from "@apis/axiosInstance";
+import { ACCESS_TOKEN, END_POINTS, REFRESH_TOKEN } from "@/constants/api";
+
+export const logout = async () => {
+  await axiosInstance.post(`${END_POINTS.USER_INFO}/logout`, {
+    accessToken: localStorage.getItem(ACCESS_TOKEN),
+    refreshToken: localStorage.getItem(REFRESH_TOKEN),
+  });
+};

src/apis/postTransferItems.ts

@@ -11,6 +11,10 @@ export const postTransferItems = async ({
   accountNumber,
   secondGrantPeriod,
   isRegistered,
+  standardTimeSellingPolicy,
+  totalAmountPolicy,
+  sellingModificationPolicy,
+  productAgreement,
 }: PostTransferProps) => {
   const { data } = await axiosInstance.post(END_POINTS.ROOM(pathVariable), {
     firstPrice,
@@ -19,6 +23,10 @@ export const postTransferItems = async ({
     accountNumber,
     secondGrantPeriod,
     isRegistered,
+    standardTimeSellingPolicy,
+    totalAmountPolicy,
+    sellingModificationPolicy,
+    productAgreement,
   });
   return data;
 };

src/components/account/enterAccountInfo/EnterAccountInfo.style.ts

@@ -1,5 +1,6 @@
 import styled, { css } from "styled-components";
 import { AnimationControls, motion } from "framer-motion";
+import { dimmedStyle } from "@pages/myPage/info/Info.style";
 
 interface BankInputProps {
   $bank: string | undefined;
@@ -90,16 +91,9 @@ export const BankInput = styled.div<BankInputProps>`
 `;
 
 export const BackgroundBlur = styled.div<{ $isVisible: boolean }>`
-  position: absolute;
-  top: 0;
-  left: 0;
+  ${dimmedStyle}
 
   display: ${({ $isVisible }) => ($isVisible ? "block" : "none")};
-
-  width: 100%;
-  height: 100%;
-
-  background-color: rgba(0, 0, 0, 0.45);
 `;
 
 export const BankListBottomSheet = styled(motion.div).attrs<{

src/components/carousel/Carousel.style.ts

@@ -3,11 +3,9 @@ import styled, { css } from "styled-components";
 
 export const CarouselContainer = styled.div<{
   $height: number;
-  $width: number;
 }>`
   position: relative;
 
-  width: ${(props) => `${props.$width}px`};
   min-height: ${(props) => `${props.$height}px`};
   height: ${(props) => `${props.$height}px`};
 

src/components/carousel/Carousel.tsx

@@ -4,7 +4,6 @@ import * as S from "./Carousel.style.ts";
 
 interface CarouselProps {
   images: string[];
-  width?: number;
   height?: number;
   arrows?: boolean;
   infinite?: boolean;
@@ -14,7 +13,6 @@ interface CarouselProps {
 
 const Carousel = ({
   height = 300,
-  width = 300,
   images,
   arrows = true,
   infinite = false,
@@ -41,7 +39,7 @@ const Carousel = ({
   });
 
   return (
-    <S.CarouselContainer $height={height} $width={width}>
+    <S.CarouselContainer $height={height}>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}

src/components/checkbox/Checkbox.style.ts

@@ -1,4 +1,4 @@
-import styled, { DefaultTheme } from "styled-components";
+import styled, { DefaultTheme, css } from "styled-components";
 
 export interface CheckboxStyleProps {
   size?: "sm" | "md" | "lg";
@@ -117,11 +117,11 @@ export const StyledCheckbox = styled.span<CheckboxStyleProps>`
 `;
 
 const labelStyles = {
-  title: (theme: DefaultTheme) => `
+  title: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale1};
     }
   `,
-  caption: (theme: DefaultTheme) => `
+  caption: (theme: DefaultTheme) => css`
     color: ${theme.color.greyScale3};
     }
   `,
@@ -140,8 +140,6 @@ export const LabelText = styled.span.withConfig({
 
   ${({ theme }) => theme.typo.caption1}
 
-  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
-
   margin-inline-start: 0.5rem;
   user-select: none;
 
@@ -150,4 +148,6 @@ export const LabelText = styled.span.withConfig({
     text-underline-offset: 2px;
     color: inherit;
   }
+
+  ${({ variant, theme }) => variant && labelStyles[variant](theme)};
 `;

src/components/layout/header/HeaderTop.tsx

@@ -80,7 +80,7 @@ const Header = () => {
       title = "정산계좌 관리";
       undo = true;
       break;
-    case PATH.NOTICE:
+    case PATH.ALARM:
       alarmIC = false;
       settingIC = false;
       title = "알림";

src/components/toast/Toast.style.ts

@@ -16,7 +16,7 @@ export const ToastContainer = styled(motion.div)<{ $isError: boolean }>`
   justify-content: center;
   align-items: center;
 
-  position: absolute;
+  position: fixed;
   left: 0;
   right: 0;
   top: 80px;

src/constants/api.ts

@@ -4,6 +4,8 @@ export const END_POINTS = {
   LOGIN: "/v1/members/signin",
   LOGOUT: "/v1/members/logout",
   SIGNUP: "/v1/members/signup",
+  ALARM: "/v1/alarms",
+  HASALARM: "/v1/alarms/status",
   ROOM: (roomId: string) => `/v1/products/${roomId}`,
   RESERVATION: "/v1/reservations",
   MAIN: "/v1/products/main",

src/constants/path.ts

@@ -1,6 +1,6 @@
 export const PATH = {
   ROOT: "/",
-  NOTICE: "/notice",
+  ALARM: "/alarm",
   SEARCHLIST: "/search",
   SEARCH_FILTER: "/search/filter",
   CREATE_TRIP: "/trip-new",

src/firebase.ts

@@ -2,13 +2,13 @@ import { initializeApp } from "firebase/app";
 
 // firebase
 const firebaseConfig = {
-  apiKey: import.meta.env.VITE_APIKEY,
-  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
-  projectId: import.meta.env.VITE_PROJECT_ID,
-  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
-  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDERID,
-  appId: import.meta.env.VITE_APPID,
-  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
+  apiKey: "AIzaSyAc4XrxZs2G1EVp-NbpCh5rw9rVgnUG284",
+  authDomain: "scbj-af2e3.firebaseapp.com",
+  projectId: "scbj-af2e3",
+  storageBucket: "scbj-af2e3.appspot.com",
+  messagingSenderId: "177564796245",
+  appId: "1:177564796245:web:6b27b878cbc2ccacf39bdc",
+  measurementId: "G-1YD7ZEM9HM",
 };
 
 initializeApp(firebaseConfig);

src/hooks/api/mutation/useValidateEmailMutation.ts

@@ -1,10 +1,13 @@
 import { postValidateEmail } from "@apis/fetchLogin";
 import { useMutation } from "@tanstack/react-query";
+import { isAxiosError } from "axios";
 
 export const useValidateEmailMutation = () => {
   const validateEmailMutation = useMutation({
     mutationFn: ({ email }: { email: string }) => postValidateEmail(email),
-    throwOnError: true,
+    throwOnError: (error) => {
+      return !(isAxiosError(error) && error.response);
+    },
   });
 
   return validateEmailMutation;

src/hooks/api/useRoomQuery.ts

@@ -0,0 +1,28 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getRoom } from "@apis/fetchRoom";
+import { calculateDiscount } from "@utils/calculator";
+
+import type { RoomData } from "@type/room";
+import type { AxiosError } from "axios";
+
+interface RoomQueryData {
+  rawData: RoomData;
+  discountRate: string;
+}
+
+export const useRoomQuery = (roomId: string) => {
+  return useSuspenseQuery<RoomData, AxiosError, RoomQueryData>({
+    queryKey: ["room", roomId],
+    queryFn: () => getRoom(roomId),
+    select: (data) => {
+      const discountRate = calculateDiscount(
+        data.originalPrice,
+        data.sellingPrice,
+      );
+      return {
+        rawData: data,
+        discountRate,
+      };
+    },
+  });
+};